<template>
	<view class="content">
	 <view class="logocard">
	 	<image class="logo" src="@/static/images/01.png" mode=""></image>
		<view class="logotext">
			专业洗护
		</view>
	 </view>
	 <view class="cardmenu">
	 	<view class="menu">
	 		<view class="place" @click="gomenulist">
	 			<text class="imgitemtext" style="z-index: 3;">门店下单</text>
				<image class="imgitem" src="@/static/images/01.png" mode=""></image>
	 		</view>
			<view class="place" @click="goreservation">
				<text class="imgitemtext" style="z-index: 3;">预约下单</text>
				<image class="imgitem" src="@/static/images/01.png" mode=""></image>
			</view>
	 	</view>
		<view class="imgboxpc">
			<image class="imgpc" src="@/static/images/01.png" mode=""></image>
		</view>
		<view class="imgboxpc">
			<image class="imgpc" src="@/static/images/01.png" mode=""></image>
		</view>
	 
	 </view>
	 
	 <!-- <u-swiper style="width: 100%;" :list="list1" @change="change" @click="click"></u-swiper> -->
	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list1: [
					require('@/static/images/01.png'),
					require('@/static/images/01.png'),
					require('@/static/images/01.png'),
				]
			}
		},
		onLoad() {

		},
		methods: {
			change() {

			},
			click() {

			},
			gomenulist(){
				uni.navigateTo({
					url: '/pages/menulist/menulist'
				})
			},
			goreservation(){
				uni.navigateTo({
					url: '/pages/reservation/reservation'
				})
			}
		}
	}
</script>

<style lang="less">
	.content {
		 
		width: 100%;
		height: 100vh;
		//background-color: aqua;
		position: relative;
	}
	.logocard{
		width: 100%;
		height: 260px;
		position: relative;
		.logo{
			width: 100%;
			height: 260px;
		}
		.logotext{
			position: absolute;
			top: 50%;
			left: 30%;
			font-size: 24px;
			color: blue;
		}
	}

	.cardmenu{
		width: 90%;
		height: calc(100vh - 200px);
		//background: olive;
		position: absolute;
		top: 200px;
		left: 50%;
		transform: translateX(-50%);
		.menu{
			width: 100%;
			height: 120px;
			//background: lavender;
			display: flex;
			justify-content: space-between;
			border-radius: 20px;
				overflow: hidden;
			.place{
				width: 48%;
				height: 100%;
				border: 1px solid;
				position: relative;
				overflow: hidden;
				.imgitemtext{
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
				}
				.imgitem{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
					
				}
			}
		}
	}
.imgboxpc{
	width: 100%;
	height: 80px;
	overflow: hidden;
	margin: 10px 0;
}
.imgpc{
	width: 100%;
	object-fit: cover;
}
	 
</style>